<template>
  <div class="box1-top">
    <el-breadcrumb class="header-top" :separator-icon="ArrowRight">
      <div class="jujs">
        <a @click="isColl" ref="late"
          ><el-icon :size="30" class="shark"><expand /></el-icon
        ></a>
      </div>
      <el-breadcrumb-item
        :separator-icon="ArrowRight"
        :to="{ path: '/Home/Mainpage' }"
        >首页</el-breadcrumb-item
      >
      <template v-if="$route.path != '/Home/Mainpage'">
        <el-breadcrumb-item
          v-for="item in $route.matched.slice(1)"
          :key="item.path"
        >
          {{ item.meta.title }}
        </el-breadcrumb-item>
      </template>
      <div></div>
    </el-breadcrumb>
  </div>
</template>

<script>
import { Expand, ArrowRight } from "@element-plus/icons-vue";
import mest from "@/router/page";
export default {
  components: {
    Expand,
    mest,
    ArrowRight,
  },
  setup() {
    return {
      ArrowRight,
    };
  },
  data() {
    return {
      isCollapse: true,
    };
  },
  methods: {
    isColl() {
      this.isCollapse = !this.isCollapse;
      this.$emit("add", this.isCollapse);
    },
  },
};
</script>

<style lang="less" scope>
.box1-top {
  width: 500px;
  display: flex;
  .shark {
    margin-top: 5px;
    margin-right: 15px;
  }
}
</style>
